<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e"
      @search="searchChange">
    </ex_super_table_page>
  </div>
</template>
<script>

import superTablePageFunction from '@/mixin/super-table-page-function';
import emitOnFunction from '@/mixin/emit-on-function';

import page_table_model_manage from '@/mixin/page_table_model_manage';
let emitKey = 'platformSync>order_list'

export default {
  title: 'label_ozon_order_list',
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: {},
  data() {
    return {

      orderData: {
        waitSubmitCount: null,
        completeSubmitCount: null,
        submitFailCount: null,
        exceptionCount: null,
        canceledCount: null,
      },
      status_map: {
        "WAIT_SUBMIT": 'waitSubmitCount',
        'COMPLETE_SUBMIT': 'completeSubmitCount',
        "SUBMIT_FAIL": 'submitFailCount',
        "EXCEPTION": 'exceptionCount',
        "CANCELED": 'canceledCount',
        "COMPLETE":'computeCount',
      },
      selection: [],
      option: {
        search: {
          default: { orderStatus: "" },
          resetFieldFun: (def, org) => {def.orderStatus = org.orderStatus;return def},
          
          model: [
            {
              key: 'orderStatus', label: 'label_status', itemClass: "w_fill",
              render: (h, { data }) => {
                let enums = this.$enumOptions['SrmOrderStatusEnum'] || []

                const list = enums.map(it => (
                  <el-radio-button key={it} label={it}>
                    {this.$enumShow(it, 'SrmOrderStatusEnum')}
                    {this.status_map[it] && this.orderData[this.status_map[it]] ? `(${this.orderData[this.status_map[it]]})` : "(0)"}
                  </el-radio-button>
                ))
                return (<el-radio-group value={data.orderStatus}
                  onInput={e => {
                    this.$set(data, 'orderStatus', e)
                    this.$refs.SuperTablePage.loadDataForSearch()
                  }}>
                  <el-radio-button key="" label="">
                    {this.$tt("label_all")}
                  </el-radio-button>
                  {list}
                </el-radio-group>
                )
              }
            },
            { key: 'postingNumber', label: 'label_platform_code', },
            { key: 'clientId', label: 'label_platform_store',  },
            { key: 'trackNumber', label: 'label_track_code',  },
            { key: 'omsOrderNo', label: 'label_outbound_code', },
          ],
        },


        table: {
          url: "/srm-api/ozon/OzonOrderRpc/selectListPage.json",
          model: this.init_table_model(),
        },
      },


    };
  },
  methods: {
    option_table_model() {
      return [
        { type: 'selection', clickToggle: true, keyGroup: 'label_table_operate' },
        {
          type: 'expandDesc', 'width': 100,
          expandDesc: {
            ...this.$defaultDescAttrs,
            model: [],
          },
        },
        { key: 'omsOrderNo', label: 'label_outbound_code', 'width': 140, },
        { key: 'orderNumber', label: 'label_order_code', 'show-overflow-tooltip': true, },
        { key: 'postingNumber', label: 'label_platform_code', 'show-overflow-tooltip': true, },
        { key: 'clientId', label: 'label_platform_store', 'width': 110, 'show-overflow-tooltip': true, },
        { key: 'trackNumber', label: 'label_track_code', 'width': 110, 'show-overflow-tooltip': true, },
        {
          key: 'sellerCustomerName', label: 'label_customer_info', 'width': 110, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$formatNameCode(v, r.sellerCustomerCode)
        },
        { key: 'customerCountry', label: 'label_consignee_country', 'width': 110, 'show-overflow-tooltip': true, },
        { key: 'customerName', label: 'label_consignee_person_name', 'width': 110, 'show-overflow-tooltip': true, },
        { key: 'customerPhone', label: 'label_consignee_person_phone', 'width': 110, 'show-overflow-tooltip': true, },
        { key: 'customerAddress', label: 'label_consignee_address', 'width': 110, 'show-overflow-tooltip': true, },
        { key: 'trackingNumber', label: 'label_track_code', 'width': 110, 'show-overflow-tooltip': true, },

        {
          key: 'orderStatus', label: 'label_status', 'width': 120, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$enumShow(v, "SrmOrderStatusEnum")
        },
        {
          key: 'exceptionMsg', label: 'label_exception_info', 'width': 120,
          render: (h, { row, column }) => {
            const code = row[column.property]
            if (!code) return ""
            return (<text_extra_tooltip_operate
              value={code} ellipsis
              data_type={column.property} data_id={row.id}
            />)
          },
        },
        { key: 'gmtCreate', label: 'label_create_time', formatter: (r, c, v, i) => this.$dateFormat(v) },
        {
          type: 'operate', width: 220,
          fixed: 'right',
          operate: [

            { label: 'label_view_detail', click: (row) => this.clickDetail(row) },
          ]
        }
      ]
    },
    clickDetail(row) {
      this.$router.push({
        path: '/page/oms/platformSync/sync_order_detail', query: { id: row.id, }
      })
    },
    searchChange() {
      this.$ajax({
        url: "/srm-api/ozon/OzonOrderRpc/selectOrderStatCount.json",
        method: 'post',
        data: this.$refs.SuperTablePage.getSearchFormData(),
        success: (res) => {
          this.orderData = res.data
        }
      })
    },

  }
};

</script>
<style></style>
